<template>
    <div class="list">
        <p>num: {{num}}</p>
        <p>doubleNum: {{doubleNum}}</p>
        <p><button @click="CHANGE_NUM">changeNum</button></p>
        <p><button @click="getNumFromBackEnd">随机数</button></p>
        <hr>
    </div>
</template>

<script>
// json.a   json["a"]  ? 
/* var json = {a:1,b:2,key:3}

for(var key in json){   
    console.log(key,json.key,json[key]) //json["a"]   json["b"]
    //a 3 1 json["a"]
    //b 3 2 josn["b"]
    //key 3 3 json["key"]
} */



/*
1.数据放入state里面进行管理
    vue component想要获取数据？ this.$store.state.num   mapState(["num"])   mapState({num:state=>state.num})
2.想要异步请求数据，然后请求回来数据后，将vuex里面存储的共享数据进行更改？
    actions这边异步请求数据
        getNumFromBackend(ctx){
            setTimeout(function(){
                let random = ....;
                //将获取到的数据给具体更改状态的mutations的具体方法
                ctx.commit(方法名,random)
            },1000)
        }

3. mutations作用？ 它就是同步的更改state数据
    [CHANGENUM](state,random){
        state.num = random;
    }
*/

import {CHANGE_NUM} from "@/store/Num/const"
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
export default {
    computed:{
        ...mapState({
            num:state=>state.Num.num  //this.$store.state.Num.num
        }),
        // doubleNum(){
        //     return this.$store.getters.doubleNum
        // }
        ...mapGetters(["doubleNum"])
    },
    methods:{
        // changeNum(){//commit作用就是调用mutations这个对象里面具体更改数据的方法
        //     this.$store.commit("CHANGE_NUM")
        // }
        ...mapMutations([CHANGE_NUM]),  //"aaaa"
        // getRandom(){
        //     this.$store.dispatch("getNumFromBackEnd")
        // }
        ...mapActions(["getNumFromBackEnd"])
    },
}
</script>

<style>

</style>
